import React, { useState } from 'react'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import { Form, Input, Button, Select, Spin, message, Upload } from 'antd';
import Map from "../../components/Map"

const { Option } = Select;
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 12,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 11,
    span: 16,
  },
};


const JobPublish = () => {
  const [form] = Form.useForm();
  let [loading, setLoading] = useState(false)
  let [editorState, seteditorState] = useState(BraftEditor.createEditorState(null))
  const onFinish = (values) => {
    // setLoading(true)
    console.log(editorState.toHTML());
  };

  const onReset = () => {
    form.resetFields();
  };

  const handleEditorChange = (editorState) => {
    seteditorState(editorState)
  }


  return (
    <Spin spinning={loading} size="large" tip="正在上传内容,请稍事等待">
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item
          name="jobname"
          label="岗位名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="intro"
          label="岗位描述"
        >
          {/* 富文本 */}
          <div style={{border:"1px solid lightgrey",overflow:"hidden"}} >
            <BraftEditor value={editorState} onChange={handleEditorChange} style={{ border: "1px solid lightgrey", overflow: "hidden" }}/>
          </div>
        </Form.Item>

        <Form.Item
          name="address"
          label="地图选址"
        >
         <Map />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  );
};

export default JobPublish;